<!--交通物流-->
<template>
    <div class="leftView">
        <div class="shrink" @click="shows = !shows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex; flex-direction: column">
                <div class="container height294"
                     :style="{'background-image': `url(${require('@/assets/bg_left1.png')})`,}">
                    <div class="container_title3">
                        <span>基础信息</span>
                    </div>
                    <div class="container-listBox">
                        <div class="container-listBox-bayonetBox">
                            <div class="container-listBox-bayonetBox-bayonetIcon"></div>
                            <div>
                                <div class="container-listBox-bayonetBox-dataFont">{{ countData }}</div>
                                <div class="container-listBox-bayonetBox-textFont">
                                    卡口数量
                                </div>
                            </div>
                        </div>
                        <div class="container-listBox-bayonetBox">
                            <div class="container-listBox-bayonetBox-monitorinIcon"></div>
                            <div>
                                <div class="container-listBox-bayonetBox-dataFont">{{ channelData }}</div>
                                <div class="container-listBox-bayonetBox-textFont">
                                    监控数量
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container-line"></div>
                    <div class="container-vehicleChat" ref="vehicleChart"></div>
                </div>
                <div class="container height273"
                     :style="{'background-image': `url(${require('@/assets/bg_left1.png')})`,}">
                    <div class="container_title3">
                        <span>安防设备</span>
                    </div>
                    <div class="container_table">
                        <div class="container_table_header">
                            <div style="width: 35%">设备类型</div>
                            <div style="width: 21%">设备总数</div>
                            <div style="width: 21%">在线设备</div>
                            <div style="width: 22%">离线设备</div>
                        </div>
                        <div class="container_table_subject userFlex">
                            <div
                                    class="container_table_subject_line"
                                    v-for="(item, i) in tableList3"
                                    :key="i"
                            >
                                <div style="width: 35%">{{ getDeviceName(item.name) }}</div>
                                <div style="width: 21%">
                                    {{ item.total }}
                                </div>
                                <div style="width: 21%">{{ item.online }}</div>
                                <div style="width: 21%">{{ item.offline }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="height300"></div>
            </div>
        </transition>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {getBaseList, getListMonitor} from "@/api/synthesis/axios";
import {getMent} from "@/api/traffic/axios";
import {getChannel} from "@/api/traffic/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            shows: true,
            //卡口数量
            countData: '',
            //监控
            channelData: '',
            // 交通监控
            tableList3: [],
            carList: [],
        };
    },
    mounted() {
        this.getIntellects()
        this.getMonitor();
        //基础信息
        this.getBase();
        //基础信息/卡口
        //基础信息/监控
        this.getChannels()
    },

    methods: {
        //基础信息/卡口
        getIntellects() {
            getMent().then((response) => {
                this.countData = response.data.totalRows
                console.log(this.countData, '基础信息/卡口')
            });
        },
        getDeviceName(name) {
            // 创建一个字典用于将 item.name 和 key 进行匹配
            const deviceDict = {
                1: "编码设备(Encoder)",
                3: "报警主机(Alarm Host)",
                5: "卡口(ANPR)",
                7: "智能设备(Intelligent Device)",
                8: "门禁设备",
                9: "动环设备",
                10: "梯控设备",
                11: "IP对讲设备",
                12: "智能锁",
                13: "业务库设备",
                14: "LED设备（报警联动）",
                15: "水文设备",
                21: "可视对讲设备",
                27: "缴费机器人",
                30: "访客机",
                35: "出入口设备",
                36: "道闸设备",
                37: "显示设备",
                38: "寻车一体机",
                40: "快鱼对讲设备",
                41: "微波阵列设备",
                45: "显控设备(Video Wall Control)",
                46: "智能安检设备",
                47: "话机设备",
                50: "考勤设备",
                51: "智慧用电设备",
                52: "野保相机",
                62: "智能设备",
                63: "智慧景区设备",
                64: "输电装置",
                65: "灯杆设备",
                66: "物联感知服务设备",
                67: "工地设备",
                68: "NB井盖",
                70: "升降柱",
                71: "车底检测",
                86: "消防视频装置",
                87: "消防设备",
                88: "消费设备",
                89: "小区虚拟设备",
                90: "NFC设备",
                91: "审讯主机",
                92: "扫码设备",
                93: "运维虚拟设备",
                94: "辅助设备",
                95: "智慧制造虚拟设备",
                96: "监控对象虚拟设备",
                97: "二维码巡更设备(虚拟设备)",
                98: "环境类设备",
                99: "机器人",
                991: "测试设备大类",
                992: "测试设备大类2",
            };

            // 通过 name 获取对应的 key
            const key = parseInt(name);

            // 根据 key 在字典中查找对应的设备名称
            return deviceDict[key] || "未知设备"; // 如果没有找到对应的设备名称，返回 "未知设备"
        },
        //基础信息
        getBase() {
            getBaseList().then((res) => {
                console.log(res, '基础信息')
                const statistics = res.data.reverse()
                let style = [
                    {
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#00E6FF",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 230, 255, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                    {
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgba(255, 131, 46, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(255, 131, 46, 0)",
                                    },
                                ]),
                                opacity: 1,
                            },
                        },
                    },
                ];
                let exit = statistics.map((it) => it.exit);
                let enter = statistics.map((it) => it.enter);
                let time = statistics.map((it) => it.time);
                this.carList = style.map((item, index) => {
                    return {
                        ...item,
                        name: index === 0 ? "离园" : "进园",
                        type: "bar",
                        barWidth: 10,
                        barGap: 1,
                        data: index === 0 ? exit : enter,
                        time,
                        itemStyle: style[index].itemStyle,
                    };
                });
                //近7天进出车辆统计
                this.initVehicle();
            });
        },
        // 安防设备
        getMonitor() {
            getListMonitor().then((res) => {
                this.tableList3 = res.data.deviceData;

                this.tableList3.forEach(item => {
                    item.total = item.offline + item.online;
                });
                console.log(this.tableList3, '安防设备')
            });
        },
        //近7天进出车辆统计
        initVehicle() {
            const myEchart = echarts.init(this.$refs.vehicleChart);
            let option = myEchart.getOption();
            if (option != null) {
                myEchart.clear();
                myEchart.setOption(option);
            }
            console.log(this.carList, '近7天进出车辆统计')
            option = {
                title: {
                    text: "近7天进出车辆统计",
                    x: "center",
                    textStyle: {
                        color: "#00E6FF",
                        fontSize: "17",
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                legend: {
                    // data: ["离园", "入园"],
                    align: "right",
                    x: "right",
                    y: "28",
                    textStyle: {
                        color: "#fff",
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 35,
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.carList && this.carList[0]["time"],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "单位（辆）",
                        nameTextStyle: {
                            color: "rgba(255, 255, 255, 0.80)",
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255, 255, 255, 0.80)",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#063374",
                            },
                        },
                    },
                ],
                series: this.carList.reverse().map((item) => item),
            };
            myEchart.setOption(option);
        },
        //基础信息/监控
        getChannels() {
            let _this = this;
            getChannel().then((res) => {
                _this.channelData = res.data.totalRows
                console.log(_this.channelData, "卡口数据")
            });
        },
    },
};
</script>


<style lang="scss">
.height230 {
  width: 280px;
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189dc5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k * $pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8 * 2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k * $pixel/$height;
  }
  .height230 {
    height: calHeight_2k(230px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.minHeight12 {
  min-height: 12px;
  margin-bottom: 5px;
}

.height294 {
  width: 450px;
  height: 294px;
}

.height300 {
  width: 450px !important;
  height: 90px;
}

.height273 {
  width: 450px;
  height: 203px;
}

.shrink {
  width: 23px;
  height: 321px;
  background-size: 100% 100%;
  background-image: url("@/assets/icon_shrink.png");
}

.leftView {
  float: left;
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  height: 630px;
  align-items: center;
  position: relative;
  z-index: 3;

  .container {
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;

    &-titleBgc {
      width: 400px;
      height: 3px;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_table {
      width: 400px;
      height: 183px;
      margin-top: 5px;
      margin-left: 22px;
      font-size: 14px;
      font-family: Noto Sans SC-Medium, Noto Sans SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);

      &_header {
        width: 100%;
        height: 20px;
        background: rgba(98, 183, 255, 0.2);
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 20px;

        div {
          width: 20%;
        }
      }

      &_subject {
        width: 100%;
        height: 115px;

        &_line {
          width: 100%;
          height: 15px;
          margin-top: 8px;
          margin-bottom: 8px;
          line-height: 15px;
          display: flex;
          justify-content: space-between;
          text-align: center;

          div {
            width: 20%;
          }
        }
      }
    }

    &-listBox {
      width: 336px;
      height: 58px;
      margin-left: 22px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-bayonetBox {
        width: 131px;
        height: 58px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-bayonetIcon {
          width: 58px;
          height: 58px;
          background-size: 100% 100%;
          background-image: url("@/assets/icon_bayonet.png");
        }

        &-monitorinIcon {
          width: 58px;
          height: 58px;
          background-size: 100% 100%;
          background-image: url("@/assets/icon_monitoring.png");
        }

        &-dataFont {
          font-size: 22px;
          font-family: D-DIN-DIN-Bold, D-DIN-DIN;
          font-weight: bold;
          background: linear-gradient(180deg, #ffffff 19%, #23a5f7 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        &-textFont {
          font-size: 14px;
          font-family: Noto Sans SC-Regular, Noto Sans SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }

    &-line {
      width: 400px;
      height: 3px;
      margin-left: 22px;
      margin-top: 10px;
      margin-bottom: 9px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_fenge.png");
    }

    &-vehicleChat {
      width: 400px;
      height: 147px;
      margin-left: 22px;
    }

    &_title1 {
      width: 216px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title1.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #ffffff;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90ccff 0%, #fafafb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &_title3 {
        width: 400px;
      height: 24px;
      margin-top: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 20px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #ffffff;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90ccff 0%, #fafafb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    &_policy {
      width: 222px;
      height: 52px;
      padding-left: 10px;
      margin-top: 8px;
      margin-left: 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_policy.png");

      &_name {
        height: 15px;
        font-size: 9px;
        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis; /*超出部分省略号表示*/
        white-space: nowrap; /*强制单行显示*/
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #1cfdff;
        line-height: 15px;
      }

      &_types {
        display: flex;
        flex-direction: row;
        min-height: 12px;
      }

      &_type {
        margin-bottom: 5px;
        width: 48px;
        display: block;
        height: 12px;
        margin-right: 5px;
        font-size: 7px;
        text-align: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
      }

      &_bg1 {
        background: linear-gradient(
                        270deg,
                        rgba(226, 80, 63),
                        rgba(231, 10, 91)
        );
      }

      &_num {
        height: 6px;
        font-size: 6px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 6px;
      }
    }
  }
}

.industrialChainStyle {
  margin-left: 5%;
  width: 90%;
  height: 240px;
}

.industryStyle {
  width: 100%;
  height: 224px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k * $pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8 * 2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k * $pixel/$height;
  }
  .minHeight12 {
    min-height: calHeight_2k(12px);
    margin-bottom: calHeight_2k(5px);
  }

  .height294 {
    height: calHeight_2k(294px);
  }
  .height300 {
    height: calHeight_2k(90px);
  }

  .height273 {
    height: calHeight_2k(203px);
  }

  .leftView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      &-titleBgc {
        height: calHeight_2k(3px);
      }

      &_table {
        height: calHeight_2k(183px);
        margin-top: calHeight_2k(5px);

        &_header {
          height: calHeight_2k(20px);
          line-height: calHeight_2k(20px);
        }

        &_subject {
          height: calHeight_2k(115px);

          &_line {
            height: calHeight_2k(15px);
            margin-top: calHeight_2k(8px);
            margin-bottom: calHeight_2k(8px);
            line-height: calHeight_2k(15px);
          }
        }
      }

      &-listBox {
        height: calHeight_2k(58px);
        margin-top: calHeight_2k(10px);

        &-bayonetBox {
          height: calHeight_2k(58px);
        }
      }

      &-line {
        margin-top: calHeight_2k(10px);
        margin-bottom: calHeight_2k(9px);
      }

      &-vehicleChat {
        height: calHeight_2k(147px);
      }

      &_title1 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }
      }

      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(15px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }
      }

      &_policy {
        height: calHeight_2k(52px);
        margin-top: calHeight_2k(8px);

        &_name {
          height: calHeight_2k(15px);
          line-height: calHeight_2k(15px);
        }

        &_types {
          min-height: calHeight_2k(12px);
        }

        &_type {
          width: calHeight_2k(48px);
          margin-bottom: calHeight_2k(5px);
          height: calHeight_2k(12px);
          line-height: calHeight_2k(12px);
        }

        &_bg1 {
        }

        &_num {
          height: calHeight_2k(6px);
          line-height: calHeight_2k(6px);
        }
      }
    }
  }

  .industrialChainStyle {
    height: calHeight_2k(240px);
  }

  .industryStyle {
    height: calHeight_2k(224px);
  }
}
</style>
